<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DD279b2a90afdf0ae7a3796787a0742e"></script>
    <title>地图展示</title>
</head>
<body>
    <div id="allmap" style="width: 500px;height: 500px;"></div>
</body>
</html>
<script type="text/javascript">

var map = new BMap.Map("container");            // 创建地图实例 ，传入容器id
var point = new BMap.Point(116.404, 39.915);    // 创建点坐标  
map.centerAndZoom(point, 15);                   // 初始化地图，设置中心点坐标和地图级别
// map.centerAndZoom("临汾市",11);                    // 根据城市显示
map.enableScrollWheelZoom();                    // 滚动缩放

//如果要去掉百度logo旁的小字,给.BMap_cpyCtrl添加display:none;但是logo就别删了

/******添加控件*******/
map.addControl(new BMap.NavigationControl());   /* 缩放条
map.addControl(new BMap.MapTypeControl());      // 地图，卫星，三维*/
map.addControl(new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT}));       /* 比例尺anchor参数是把它放右下角
map.addControl(new BMap.OverviewMapControl({isOpen:true}));  // 缩略地图，默认右下角*/


/****添加标记点*******/
var myIcon = new BMap.Icon("icon.png", new BMap.Size(26,42),{
        anchor:new BMap.Size(13,42),            // 图标中下方箭头位置
        imageOffset: new BMap.Size(-1,0)        // 设置图片偏移,大图片部分显示
    });      
    
var marker = new BMap.Marker(point,{icon: myIcon}); //创建标记点，不写第二个参数的话是默认icon红红的一个点
marker.addEventListener("click",function(e){alert(e.point.lat+"----"+e.point.lng);});//添加点击

var label = new BMap.Label("<p style='margin:5px;'>这个标注点可以拖动和点击哦</p>",{offset:new BMap.Size(20,-10)});//创建文字标注可以调节偏移量
marker.setLabel(label);//标记点添加文字标注

marker.enableDragging();//让标记点可以拖动；

map.addOverlay(marker);


/******添加信息窗口*********/
var opts = {width:250,height:100,title:"title"}
var infoWindow = new BMap.InfoWindow("content", opts);  // 创建信息窗口对象    
map.openInfoWindow(infoWindow,new BMap.Point(116.33, 39.99));                   // 打开信息窗口
//$(".BMap_pop>img:eq(0)").click();                     // 虽然不是正规方法，js触发窗口关闭按钮，就不用手动关闭了


/**********画线************/
var polyline = new BMap.Polyline([
        new BMap.Point(116.38, 39.90),
        new BMap.Point(116.48, 40.00),
        new BMap.Point(116.29, 39.99)
    ],
    {strokeColor:"#f00", strokeWeight:2, strokeOpacity:0.5}    
);    
map.addOverlay(polyline);


/***********画面************/
var polygon = new BMap.Polygon([
        new BMap.Point(116.38,39.99),
        new BMap.Point(116.31,39.99),
        new BMap.Point(116.31,39.91)
    ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});  //创建多边形
map.addOverlay(polygon);   //增加多边形
    
    
/**********定位*************/
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
    if(this.getStatus() == BMAP_STATUS_SUCCESS){
        var mk = new BMap.Marker(r.point);
        map.addOverlay(mk);
        map.panTo(r.point);//地图有过渡的移动到point位置
        alert('您的位置：'+r.point.lng+','+r.point.lat);
    }
    else {
        alert('failed'+this.getStatus());
    }        
},{enableHighAccuracy: true});
    
    
/***********热力图**********/
//需要插入http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js

if(!isSupportCanvas()){alert('您所使用的浏览器不支持canvas功能');}
var points =[
    {"lng":116.418261,"lat":39.921984,"count":50},
    {"lng":116.423332,"lat":39.916532,"count":51},
    {"lng":116.419787,"lat":39.930658,"count":15},
    {"lng":116.42076,"lat":39.915251,"count":70},
    {"lng":116.425867,"lat":39.918989,"count":8}];
   
//参数说明如下:
/* visible 热力图是否显示,默认为true
 * opacity 热力的透明度,0-1
 * radius 势力图的每个点的半径大小   
 * gradient  {JSON} 热力图的渐变区间 . gradient如下所示
    {0.2:'rgb(0, 255, 255)',0.5:'rgb(0, 110, 255)',.8:'rgb(100, 0, 255)'}
    其中 key 表示插值的位置:0~1, value 为颜色值. 
 */
heatmap = new BMapLib.HeatmapOverlay({"radius":20});
map.addOverlay(heatmap);
heatmap.setDataSet({data:points,max:60});

//是否显示热力图
function openHeatmap(){heatmap.show();}
function closeHeatmap(){heatmap.hide();}
closeHeatmap();
openHeatmap();

//改变颜色
function setGradient(){
    var gradient = {0.2:'rgb(100, 0, 255)',0.5:'rgb(0, 110, 255)',.8:'rgb(0, 255, 255)'};
    heatmap.setOptions({"gradient":gradient});
}
//判断浏览区是否支持canvas
function isSupportCanvas(){var elem = document.createElement('canvas');return !!(elem.getContext && elem.getContext('2d'));}

</script>
